<script setup lang="ts">
import { getQclLeftData } from '@/api/Quancheng';

const topData = ref({});
const emit = defineEmits(['postMessage']);
const topPostMeassageHandler = (data, name, type) => {
  emit('postMessage', data, name, type);
};
onMounted(async () => {
  try {
    const { data } = await getQclLeftData({ type: 'top' });
    topData.value = data.qclTopData;
    console.log(topData.value, 'topData.value');
  } catch (error) {
    console.warn(error, '获取顶部数据失败!');
  }
});
</script>

<template>
  <div class="total-box" v-if="topData">
    <div
      class="top-data-box"
      v-if="topData['人口密集区主干管线']"
      @click="topPostMeassageHandler(topData['人口密集区主干管线'].equipmentOverhaulQcls, '人口密集区', '')"
    >
      <div class="right-data">
        <div class="wai-yuan-1 rotation-fan"></div>
        <div class="yuan-icon1"></div>
      </div>
      <div class="left-data">
        <div class="jianbian-box1">{{ topData['人口密集区主干管线'].total }} <span>个</span></div>
        <div>人口密集区</div>
      </div>
    </div>
    <div
      class="top-data-box"
      v-if="topData['相邻地下空间']"
      @click="topPostMeassageHandler(topData['相邻地下空间'].equipmentOverhaulQcls, '相邻地下空间', '')"
    >
      <div class="right-data">
        <div class="wai-yuan-1 rotation-fan"></div>
        <div class="yuan-icon4"></div>
      </div>
      <div class="left-data">
        <div class="jianbian-box4">{{ topData['相邻地下空间'].total }} <span>个</span></div>
        <div>相邻地下空间</div>
      </div>
    </div>
    <div
      class="top-data-box"
      v-if="topData['外部扰动风险区域/管段']"
      @click="topPostMeassageHandler(topData['外部扰动风险区域/管段'].equipmentOverhaulQcls, '扰动风险区域', '')"
    >
      <div class="right-data">
        <div class="wai-yuan-1 rotation-fan"></div>
        <div class="yuan-icon5"></div>
      </div>
      <div class="left-data">
        <div class="jianbian-box5">{{ topData['外部扰动风险区域/管段'].total }} <span>个</span></div>
        <div>扰动风险区域</div>
      </div>
    </div>
    <div class="top-data-box" v-if="topData['预警总数']">
      <div class="right-data" @click="topPostMeassageHandler(topData['预警总数'].waringInfos, '预警总数', '')">
        <div class="wai-yuan-1 rotation-fan"></div>
        <div class="yuan-icon2"></div>
      </div>
      <div class="left-data">
        <div class="jianbian-box2">{{ topData['预警总数'].total }} <span>件</span></div>
        <div>预警总数</div>
      </div>
    </div>
    <div class="top-data-box" v-if="topData['历史报警总数']">
      <div class="right-data" @click="topPostMeassageHandler(topData['历史报警总数'].waringInfos, '历史报警总数', '')">
        <div class="wai-yuan-1 rotation-fan"></div>
        <div class="yuan-icon3"></div>
      </div>
      <div class="left-data">
        <div class="jianbian-box3">{{ topData['历史报警总数'].total }} <span>件</span></div>
        <div>历史报警总数</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.total-box {
  z-index: 99;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 43%;
  background-size: 100% 100%;

  :nth-child(1) {
    cursor: pointer;
  }

  .blue-font {
    margin: 0 8px;
    font-size: 33px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #00ffff;
  }

  .top-data-box {
    min-width: 20%;
    display: flex;
    margin-left: 7px;
    align-items: center;

    .right-data {
      position: relative;
      width: 54px;
      height: 54px;

      .active-yuan {
        width: 54px;
        height: 54px;
        background-size: 100% 100%;
        text-align: center;
        line-height: 84px;
        position: absolute;
        background-image: url('@/assets/largescreen/height-yuan.png') !important;
      }

      .active-yuan2 {
        position: absolute;
        width: 68px;
        height: 68px;
        background-size: 100% 100%;
        background-image: url('@/assets/largescreen/height-yuan2.png') !important;
      }

      .wai-yuan {
        background-image: url('@/assets/largescreen/top-quan1.png');
        width: 54px;
        height: 54px;
        background-size: 100% 100%;
        text-align: center;
        line-height: 84px;
        position: absolute;
      }

      .wai-yuan-1 {
        position: absolute;
        left: 50%;
        top: 50%;
        background-image: url('@/assets/largescreen/top-quan2.png');
        width: 68px;
        height: 68px;
        background-size: 100% 100%;
      }

      .active-chuzhi,
      .active-yujing,
      .active-ranqi,
      .active-xueliang,
      .active-ganzhi,
      .yuan-icon2,
      .yuan-icon3,
      .yuan-icon4,
      .yuan-icon5,
      .yuan-icon1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url('@/assets/largescreen/top-icon1.png');
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
      }

      .yuan-icon1 {
        background-image: url('@/assets/largescreen/top-icon1.png');
      }

      .yuan-icon2 {
        background-image: url('@/assets/largescreen/top-icon2.png');
      }

      .yuan-icon3 {
        background-image: url('@/assets/largescreen/top-icon3.png');
      }

      .yuan-icon4 {
        background-image: url('@/assets/largescreen/top-icon4.png');
      }

      .yuan-icon5 {
        background-image: url('@/assets/largescreen/top-icon5.png');
      }

      .active-ganzhi {
        background-image: url('@/assets/largescreen/active-ganzhi.png');
      }

      .active-xueliang {
        background-image: url('@/assets/largescreen/active-xueliang.png');
      }

      .active-ranqi {
        background-image: url('@/assets/largescreen/active-ranqi.png');
      }

      .active-yujing {
        background-image: url('@/assets/largescreen/active-yujing.png');
      }

      .active-chuzhi {
        background-image: url('@/assets/largescreen/active-chuzhi.png');
      }
    }

    .rotation {
      animation-name: spin;
      animation-duration: 4000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @keyframes spin {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .rotation-fan {
      animation-name: fan;
      animation-duration: 4000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @keyframes fan {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -50%) rotate(-360deg);
      }
    }

    .left-data {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-left: 20px;
      min-width: 73px;
      height: 54px;

      .jianbian-box2,
      .jianbian-box3,
      .jianbian-box4,
      .jianbian-box5,
      .jianbian-box1 {
        font-size: 22px;
        font-family: PangMenZhengDao;
        line-height: 15px;
        background-clip: text;
        color: transparent;

        span {
          color: #fefefe;
          font-size: 12px;
        }
      }

      .jianbian-box1 {
        background-image: linear-gradient(180deg, #fefefe 0%, #ffd86c 100%);
      }

      .jianbian-box2 {
        background-image: linear-gradient(180deg, #fefefe 0%, #ff726c 100%);
      }

      .jianbian-box3 {
        background-image: linear-gradient(180deg, #fefefe 0%, #4aff8f 100%);
      }

      .jianbian-box4 {
        background-image: linear-gradient(180deg, #fefefe 0%, #ff80f5 100%);
      }

      .jianbian-box5 {
        background-image: linear-gradient(180deg, #fefefe 0%, #6af9ff 100%);
      }

      :nth-child(2) {
        font-size: 12px;
      }
    }
  }
}

@media (min-width: 3840px) {
  .total-box {
    width: 25% !important;

    .top-data-box {
      min-width: 25% !important;
    }
  }
}
</style>
